<template>

    <div id="header-container">
        <div id="left">
                <img src="../assets/logo1.webp" alt="logo" />
                <span>食必达</span>
        </div>
        <div id="search">
            <el-input
                v-model="searchText"
                class="input-container"
                placeholder="输入厨师名， 厨师标签或地点进行查询"
                :prefix-icon="Search"
                @keyup.enter="$emit('button-click', searchText)"
            />
            <el-button type="primary"  @click="$emit('button-click', searchText)">搜索</el-button>
        </div>
        <div id="right">
            <div id="image-container">
                <img src="../assets/user.webp" alt="logo" @click="showUserInfo($router)"/>
            </div>
            <span>{{ currentUser.name ? currentUser.name : "" }}</span>
            <a href="/personCenter/order_out" id="order">订单</a>
            <a href="/loginPage" id="login_out" @click="LoginOut">登出</a>
        </div>
    </div>
</template>
<script setup>
import { Search } from "@element-plus/icons-vue";
import {getCurrentInstance, reactive, ref} from "vue";
const { proxy } = getCurrentInstance();
let currentUser = reactive({
    name:''
})
currentUser.name = JSON.parse(localStorage.getItem('name'))
let searchText = ref(null);

function showUserInfo(router) {
    proxy.$cutPage.value = 'showUserInfo'
    router.push('/personCenter')
}
function LoginOut(){
  proxy.$isLogin.value = false
}
</script>
<style scoped>
#header-container {
    background-color: white;;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    border-bottom: 1px lightgray solid;
}
#left{
    display: flex;
    align-items: center;
}
#left >span{
    font-size: 24px;
    font-weight: bold;
    font-family: 幼圆,serif;
    letter-spacing: 10px;
    color: #008c8c;
}
#left > img {
    height: 60px;
    line-height: 80px;
    margin-right: 10px;
}
#right{
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 50px;
}
#right > *{
    margin: 0 10px;
}
#image-container {
    width: 40px;
    height: 40px;
    overflow: hidden;
    background-color: #D8E0EA;
    border-radius: 100px;
    border: 1px lightgray solid;
    transition: background-color 0.4s ease ,transform 0.3s, box-shadow 0.3s;;
}
#image-container:hover{
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.49);
}
#image-container > img{
    height: 40px;
    width: 40px;
}
#order{
    background-color: #2e82e5;
    color: white;
    border-radius: 8px;
    padding: 5px 8px;
    text-decoration: none;
}
#order:hover{
    background-color: #085ec5;
}
#login_out{
    background-color: #f16e6e;
    color: white;
    border-radius: 8px;
    padding: 5px 8px;
    text-decoration: none;
}
#login_out:hover{
    background-color: #d03b3b;
}
.input-container {
    width: 300px; /* 根据需要设置宽度 */
    margin-right: 10px; /* 根据需要设置间距 */
}
</style>